<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 3000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "300px",
    },
  },
  data() {
    return {
      chart: null,
      echartsOneData: [
        { value: 1048, name: "住建", itemStyle: { color: "#307ff9" } },
        { value: 735, name: "水务", itemStyle: { color: "#30e583" } },
        { value: 580, name: "交通", itemStyle: { color: "#00e1f5" } },
        { value: 484, name: "其他", itemStyle: { color: "#feaa2b" } },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "25%",
          right: "2%",
          // left: 'right',
          itemGap: 14,
          data: this.echartsOneData,
          orient: "auto",
          itemWidth: 15,
          itemHeight: 10,
          formatter: (name) => {
            let target;
            for (let i = 0; i < this.echartsOneData.length; i++) {
              if (this.echartsOneData[i].name === name) {
                target = this.echartsOneData[i].value;
              }
            }
            // let arr=["{a|"+target+"}","{b|"+name+"}"]
            let arr = [name + "   " + "{a|" + target + "}" + "  (个)"];
            return arr.join("\n");
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 20,
                // color:'red',
                fontFamily: "myFirstFont",
              },
            },
          },
        },
        series: [
          {
            name: "总数",
            type: "pie",
            selectedMode: "single",
            radius: [0, "40%"],
            center: ["30%", "50%"],
            itemStyle: {
              color: "#307ff9",
            },
            label: {
              // normal: {
              show: true,
              color: "#fff",
              position: "center",
              fontSize: "20px Microsoft YaHei",
              formatter: function (a) {
                return "{top|" + a.value + "}" + "\n" + "{down|" + a.name + "}";
              },
              // },
              rich: {
                top: {
                  fontSize: 30,
                  fontFamily: "myFirstFont",
                },
                down: {
                  fontSize: 14,
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [{ value: 1232, name: "工地总数" }],
          },
          {
            type: "pie",
            legendHoverLink: false,
            selectedOffset: 0,
            // roseType:'area',
            top: 0,
            right: 0,
            radius: ["60%", "70%"], //大小
            center: ["30%", "50%"], //位置
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "inside",
              color: "red",
              fontSize: "8",
              fontFamily: "myFirstFont",
            },

            labelLine: {
              show: false,
            },
            data: this.echartsOneData,
          },
        ],
      });
    },
  },
};
</script>
